<template>
  <div class="dashContent">
    <div class="header">
      <div class="title">
        <div class="line" />
        <div class="text name">工程信息</div>
        <router-link to="/workManagement">
          <div class="text">查看详情&nbsp;></div>
        </router-link>
      </div>
    </div>
    <div class="content">
      <div class="div">
        <div class="conbg">
          <div class="title">项目类型</div>
          <div class="name">{{ workManagement.projectType||'--' }}</div>
        </div>
        <div class="conbg">
          <div class="title">工程造价</div>
          <div class="name">{{ workManagement.projectCost||'--' }}</div>
        </div>
      </div>
      <div class="div">
        <div class="conbg">
          <div class="title">工程状态</div>
          <div v-if="workManagement.status=='before'" class="name noStatusColor">未开工</div>
          <div v-else-if="workManagement.status=='inProgress'" class="name doingStatueColor">施工中</div>
          <div v-else-if="workManagement.status=='finshed'" class="name stopStatusColor">已竣工</div>
          <div v-else class="name extensionStatusColor">已延期</div>
        </div>
        <div class="conbg">
          <div class="title">建筑面积</div>
          <div class="name">{{ workManagement.buildUnit||'--' }}</div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div style="width: 100%;padding: 15px;">
        <div class="text">工程进度</div>
        <div style="margin: 0 0 0 79px;">
          <el-progress :text-inside="true" :stroke-width="16" :percentage="workManagement.projectProgress" :color="customColors" />
        </div>
      </div>
    </div>
    <div class="time">
      <div class="text">
        <div>开工日期：{{ workManagement.planStartTime||'--' }}</div>
        <div>竣工日期：{{ workManagement.planCompletionTime||'--' }}</div>
      </div>
    </div>
  </div>
</template>

<script>

import { Message } from 'element-ui'
import { projectDetail } from '@/api/project'
import { mapGetters } from 'vuex'

export default {
  name: 'Homeproject',
  data() {
    return {
      workManagement: {},
      listLoading: false,
      percentage: 16, // 百分百
      customColors: [
        { color: '#f7b500' }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'projects',
      'projectsId'
    ])
  },
  created() {

  },
  mounted() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.listLoading = true
      const res = await projectDetail(this.projectsId)
      if (res.code === 200) {
        this.workManagement = res.data
      } else {
        Message({
          message: res.data.msg || 'Error',
          type: 'error',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashContent {
  .header{
    .title{
      display: flex;
      padding: 8px 0 0 6px;
      .line{
        width:4px;
        height:16px;
        background:#ffffff;
        margin-right: 8px;
    }
    .text{
      flex: 1;
      font-size:14px;
      font-weight:500;
      color:#ffffff;
      cursor: pointer;
    }
    .name{
      flex-grow: 4;
    }
    }
  }
  .content{
    margin: 15px 0 0 18px;
    .div{
        display: flex;
        margin-bottom: 12px;
        .conbg{
        width:50%;
        height:70px;
        background:rgba(37, 38, 47, 1);
        // background:linear-gradient(90deg,rgba(0,197,255,0.2) 0%,rgba(0,197,255,0.01) 100%);
        margin: 0 22px 0 0;
        .title{
          font-size:14px;
          font-weight:500;
         color:rgba(247,181,0,1);
          text-align: center;
          padding: 12px 0;
        }
        .name{
          font-size:18px;
          font-weight:400;
          color:rgba(255,255,255,1);
          text-align: center;
        }
      }
    }
  }
  .footer{
    .text{
      float: left;
      font-size:14px;
      font-weight:500;
      color:#ffffff;
    }
  }
  .time{
    background: url('../../../assets/images/dashboard-bottom.png');
    background-size:100% 100%;
    -moz-background-size:100% 100%;
    font-size:12px;
    font-weight:400;
    color:rgba(255,255,255,1);
    height: 50px;
    .text{
      display: flex;
      margin-top: 10px;
      div{
        flex: 1;
        margin-left: 15px;
      }
    }
  }
}
.noStatusColor{
  background:rgba(117,132,155,1);
  border-radius:2px;
  padding: 5px 5px 5px 5px;
  width:60px;
  height:20px;
  font-size:12px !important;
  font-weight:400 !important;
  color:rgba(255,255,255,1);
  text-align: center;
  margin: 0 auto;
  width:60px;
}
.doingStatueColor{
  background:rgba(34,194,247,1);
  border-radius:2px;
  padding: 5px 5px 5px 5px;
  font-size:12px !important;
  font-weight:400 !important;
  color:rgba(255,255,255,1);
  text-align: center;
  margin: 0 auto;
  width:60px;
}
.extensionStatusColor{
  background:rgba(254,152,61,1);
  border-radius:2px;
  padding: 5px 5px 5px 5px;
  font-size:12px !important;
  font-weight:400 !important;
  color:rgba(255,255,255,1);
  text-align: center;
  margin: 0 auto;
  width:60px;
}
.stopStatusColor{
  background:rgba(16,192,56,1);
  border-radius:2px;
  padding: 5px 5px 5px 5px;
  font-size:12px !important;
  font-weight:400 !important;
  color:rgba(255,255,255,1);
  text-align: center;
  margin: 0 auto;
  width:60px;
}
</style>
